import {useEffect, useState} from 'react';
// @ts-ignore
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legendPlain';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markPoint';
import {queryMonthFamilyPaymentPieData} from "@/pages/Analyse/service";


const MonthFamilyPaymentPieChart = (props: {month: string}) => {

  // 图表数据源
  const [data, setData] = useState()
  useEffect(() => {
    queryMonthFamilyPaymentPieData({month: props.month}).then((res)=>{
      if (res.status === "done"){
        // 获取成功
        setData(res.data)
      }
    })
  }, [props.month]);

  // 图表参数
  const [main, setMain] = useState("")
  const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {},
      // toolbox: {
      //   feature: {
      //     dataView: { show: true, readOnly: false },
      //     // magicType: { show: true, type: ['line', 'bar'] },
      //     // restore: { show: true },
      //     saveAsImage: { show: true }
      //   }
      // },
      series: [
        {
          name: '金额',
          type: 'pie',
          radius: [20, 60],
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c} 元}',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },
          labelLine: {
            length: 15,
            length2: 0,
            maxSurfaceAngle: 80
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          tooltip: {
            valueFormatter: function (value: number) {
              return value + ' 元';
            }
          },
          // 饼图数据源引用
          data: data
        }
      ]
  }
  useEffect(() => {
    const node = document.getElementById("thisMonth_FamilyPayPie_chart_1")
    // @ts-ignore
    setMain(node)
  }, [main]);
  if (main !== ""){
    const myChart = echarts.init(main);
    myChart.setOption(option)
  }
  return (
    <div style={{width: `100%`, height: 300}} id={"thisMonth_FamilyPayPie_chart_1"}/>
  )
}
export default MonthFamilyPaymentPieChart;
